<template>
    <div class="login">
        <div class="login_head">
            <van-icon name="arrow-left" />
            <h3>登录</h3>
            <span></span>
        </div>
        <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
                v-model="password"
                type="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </div>
</template>

<script>
export default {
  data () {
    return {
      username: 'admin',
      password: 'admin'
    }
  },
  methods: {
    async onSubmit () {
      const { data: res } = await this.$http.post('/user/login', { username: this.username, password: this.password })
      window.sessionStorage.setItem('token', res.body.token)
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.login{
    width: 100%;
    height: 100%;
}
.login_head{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
</style>
